@import url(../../css.css);

@font-face {
  font-family: 'Magic';
  src: url('../fonts/magic.ttf') format('truetype');
}

body {
	margin:0;
	padding:0;
	background:url(../img/bg.jpg) repeat!important;	
}

header {
	background:#488BF4;	
	height:80px;
	text-align:center;
}

h1 {
	font-family: 'Magic';
	margin-bottom:50px;
}

h2 {
	font-family: 'Magic';
	font-size:24px;
	font-weight:800;
	color:#FFF;
	margin-bottom:30px;
	line-height:34px;
}

.middle h2 {
	text-shadow:0px 3px 0px rgba(14,55,133, 1);
}

.no-pad {
	padding:0!important;
}

.valid {
	margin:50px 0;
}

button {
	font-family: 'Magic'!important;
	color:#FFF!important;
	font-size:18px!important;
	background:#60C645!important;
	padding:30px 40px!important;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
	border:0!important;
	text-shadow:0px 3px 3px rgba(48,130,27, 0.75)!important;
}

.button {
	font-family: 'Magic'!important;
	color:#FFF!important;
	font-size:18px!important;
	background:#60C645!important;
	padding:30px 0 30px 40px!important;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;	
	border:0!important;
	text-shadow:0px 3px 3px rgba(48,130,27, 0.75)!important;
}

.connect-btn-area {
	margin:30px 0 60px;
}

.gen-btn-area {
	margin:30px 0 60px;
}

.arrow {
	font-family: 'Magic'!important;
	color:#FFF!important;
	font-size:18px!important;
	background:#46AA2B!important;
	margin-left:30px;
	padding:30px 40px!important;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;	
	border:0!important;
	margin-top:30px!important;
	margin-bottom:50px!important;
	text-shadow:0px 3px 3px rgba(48,130,27, 0.75)!important;
}

a:hover {
	text-decoration:none!important;
}

.button:hover {
	background:#4CB131!important;
}

.arrow:hover {
	background:#3C9D22!important;
}

input[type="text"] {
	border:2px solid #000!important;
	padding:0 10px!important;
	font-size:24px!important;
	font-weight:800!important;
	height:46px!important;
}

select {
	border:2px solid #000!important;
	padding:0 10px!important;
	font-size:24px!important;
	font-weight:800!important;
	height:46px!important;
}

.checkbox input[type="checkbox"] {
	border:2px solid #000!important;
	width:24px!important;
	height:24px!important;
	background:#FFF!important;
	-moz-border-radius:3px!important;
	-webkit-border-radius:3px!important;
	border-radius:3px!important;
	margin-top:0!important;
	padding-right:30px!important;	
}

ul {
	list-style:none;
	margin-left:-30px!important;
}

li {
	display:inline-block;
	margin-right:2%;
	width:30%;
}

.logo {
	top:10px;
	text-align:center;
}

.logo img {
	margin:0 auto!important;	
}

.inside-section {
	background:#FFF;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	-moz-box-shadow: 0px 3px 2px 0px #cfcfcf;
	-webkit-box-shadow: 0px 3px 2px 0px #cfcfcf;
	-o-box-shadow: 0px 3px 2px 0px #cfcfcf;
	box-shadow: 0px 3px 5px 0px rgba(6,38,70, 1);
	filter:progid:DXImageTransform.Microsoft.Shadow(color=#cfcfcf, Direction=180, Strength=2);
	margin-top:140px;
	padding-top:30px;
	padding-bottom:0;
	z-index:100;
	position:absolute;
	left:50%;
	margin-left:-500px;
	max-width:1000px;
	margin-bottom:100px;
}

.middle {
	background:#488BF4;	
	padding:50px 50px 10px 50px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
}

.middle label {
	color:#FFF;
	font-size:18px;
}

.diams {
	font-family: 'Magic';
	background:#B32ABE;
	padding:20px 40px;
	text-align:center;
	font-size:24px;
	font-weight:800;
	color:#FFF;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;	
}

.account-connected.acc-disabled {
	display:none;
}

.account-connected {
	font-family: 'Magic';
	font-size:32px;
	color:#FFF;
	text-align:center;
	font-weight:700;
	margin-bottom:30px;	
	text-shadow:0px 3px 0px rgba(14,55,133, 1);
}

#user-accname {
	color:#60C645;
}

.account-connet-area.account-disabled {
	display:none;	
}

.gen-section .gen-area.area-disabled {
    opacity: 0.5;
}

.gen-section .gen-area .rp-list li:hover {
    cursor: pointer;
	color:#B32ABE;
	background:#FFF;
}

.gen-section .gen-area .rp-list .activated {
    color:#B32ABE;
	background:#FFF;
}


#loading_modal .loader, #loading_modal .loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
}

#loading_modal .loader {
    margin: 0em auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(0,0,0,0.2);
    border-right: 1.1em solid rgba(0,0,0,0.2);
    border-bottom: 1.1em solid rgba(0,0,0,0.2);
    border-left: 1.1em solid #0a5bac;
    animation: load8 1.1s infinite linear;
	-webkit-animation: spin 1.5s infinite linear;
    -moz-animation: spin 1.5s infinite linear;
    -o-animation: spin 1.5s infinite linear;
    animation: spin 1.5s infinite linear;
}

#gen_modal .loader, #gen_modal .loader:after {
    border-radius: 50%;
    width: 10em;
    height: 10em;
}

#gen_modal .loader {
    margin: 0em auto;
    font-size: 10px;
    position: relative;
    text-indent: -9999em;
    border-top: 1.1em solid rgba(0,0,0,0.2);
    border-right: 1.1em solid rgba(0,0,0,0.2);
    border-bottom: 1.1em solid rgba(0,0,0,0.2);
    border-left: 1.1em solid #60C645;
    animation: load8 1.1s infinite linear;
	-webkit-animation: spin 1.5s infinite linear;
    -moz-animation: spin 1.5s infinite linear;
    -o-animation: spin 1.5s infinite linear;
    animation: spin 1.5s infinite linear;
}

.checkbox {
	margin-top:40px;	
}

#m-accname {
	color:#F436F6;
}

#m-server {
	color:#FFAB18;	
}

.vjs-waiting .vjs-loading-spinner, .vjs-seeking .vjs-loading-spinner {
    display: none!important;
}

.button-pop {
	margin:30px 0 50px;
}

.foot {
	width:100%;
	left:50%;
	margin-left:-50%;
	color:#FFF;
	position:fixed;
	bottom:5px;
		
}

.generator-verification {
	display:none;
}

@media (min-width: 992px) and (max-width:1199px) {
	.middle {
		padding:40px 20px;	
	}
	
	.miidle label {
		font-size:18px;
	}
	
	.diams {
		padding:20px;
	}
	
	ul {
		margin-left:30px!important;
		padding:0;
	}
	
	li {
		margin-right:2%;
	}
	
	.inside-section {
		left:50%;
		margin-left:-400px;
		max-width:800px;
	}
	
	.gen-btn-area {
		margin:30px 0 20px;
	}
}

@media (min-width: 768px) and (max-width:991px) {
	ul {
		margin:0;
	}
	
	li {
		width:100%;
		margin-bottom:20px;
		margin-right:0;
	}
	
	.inside-section {
		left:50%;
		margin-left:-330px;
		max-width:660px;
	}
	
	.gen-btn-area {
		margin:30px 0 20px;
	}
}

@media (max-width:767px) {
	
	.inside-section {
		margin-top:100px;
		padding-top:15px;	
		left:50%;
		margin-left:-150px;
		max-width:300px;
		min-width:300px;
	}
	
	h1 {
		font-size:28px;
		margin-bottom:15px;
	}
	
	h2 {
		font-size:24px;
		margin-bottom:15px;
		line-height:32px;
		text-align:center;
	}
	
	.middle {
		padding:10px 20px 20px 20px;
	}
	
	.button {
		padding:20px!important;	
		width:100%;
	}
	
	.arrow {
		display:none;
	}
	
	ul {
		margin-left:-40px!important;
	}
	
	li {
		width:100%!important;
		font-size:21px!important;
		margin-bottom:15px;
		padding:20px 10px!important;
	}
}